﻿<template>
  <el-radio-group v-model="direction">
    <el-radio label="ltr">从左往右开</el-radio>
    <el-radio label="rtl">从右往左开</el-radio>
    <el-radio label="ttb">从上往下开</el-radio>
    <el-radio label="btt">从下往上开</el-radio>
  </el-radio-group>
  <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
    点我打开</el-button>
  <el-drawer title="登飞来峰" v-model="drawer" :direction="direction" :before-close="handleClose" destroy-on-close>
    <span>飞来山上千寻塔，闻说鸡鸣见日升。不畏浮云遮望眼，自缘身在最高层。</span>
  </el-drawer>
</template>
<script>
import { ElMessageBox } from 'element-plus'
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
    }
  },
  methods: {
    handleClose(done) {
      ElMessageBox.confirm('确认关闭？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          done()
        })
        .catch(() => { })
    },
  },
}
</script>